{% extends "base.html" %}
{% load i18n humanize %}

{% block extra_head %}
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}firestation/firestation.css" />
{% endblock %}

{% block extra_script %}
    {{ super }}
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

     <script type="text/javascript">
    var config = {
      geom: {{ object.geom.json|safe }},
      centroid: [{{ object.geom.centroid.y }}, {{ object.geom.centroid.x }}],
      id: {{object.id}}
    }
    </script>

{% endblock %}

{% block body_outer %}
    <div class="container" ng-controller="jurisdictionController" ng-app="fireStation">
        <div class="row">
            <div class="span12"></div>
               <div class="span12">
                <h2>{{ object.name }}</h2>
                <hr/>

                <aside class="span4 pull-right">
                    <div class="well map-well">
                        <div id="map" style="height:200px"></div>
                        {% if object.has_full_address %}
                        <address>
                            {{ object.address }}<br/>
                            {{ object.city }}, {{ object.state }} {{ object.zipcode }}
                        </address>
                        {% else %}
                            <address>
                            {{ object.content_object.name }}, {{ object.content_object.state_name }}
                            </address>
                        {% endif %}
                    </div>


                    <div>
                     <table class="table station-detail-table table-bordered table-striped">
                      <tbody>
                      <tr>
                          <td class="station-detail-table-attribute">Jurisdiction Type</td>
                          <td>{{ object.get_fcode_display }}</td>
                        </tr>
                        <tr>
                          <td class="station-detail-table-attribute">Estimated Population</td>
                          <td>{{ object.population | intcomma }}</td>
                        </tr>
                        <tr>
                          <td class="station-detail-table-attribute">FIPS Code</td>
                          <td>{{ object.fips }}</td>
                        </tr>
                        <tr>
                          <td class="station-detail-table-attribute">State</td>
                          <td>{{ object.state }}</td>
                        </tr>
                      </tbody>
                    </table>
                    </div>


                <form method="post" action="/fire-departments/county/{{ object.id }}">
                    {% csrf_token %}
                    <button type="submit" class="btn">Create Department from County</button>
                </form>
                <a href="{% url 'set_fire_district' next.id %}">{{ next }}</a>

                </aside>
                <div class="span7">
                   <h4>Stations: {{ stations.count }}</h4>
                   <ul>
                    {% for station in stations%}
                       <li><a href="{{ station.get_absolute_url }}">{{ station.name }} - {{ station.department }}</a></li>
                    {% endfor %}
                   </ul>

                     <h4>Incorporated Places: {{ incorporated_places.count }}</h4>
                   <ul>
                    {% for place in incorporated_places %}
                       <li>{{ place.name }}</li>
                    {% endfor %}
                   </ul>
                </div>
               </div>

        </div>
    </div>
{%  endblock %}
